<route lang="json5">
{
  style: {
    navigationBarTitleText: '购物车',
    navigationBarBackgroundColor: '#018d71',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <view class="cart-page">
    <!-- 购物车为空时显示 -->
    <view class="empty-cart" v-if="cartItems.length === 0">
      <view class="empty-icon">🛒</view>
      <view class="empty-text">购物车空空如也</view>
      <view class="empty-subtext">快去挑选心仪的商品吧</view>
      <wd-button type="primary" @click="goShopping">去购物</wd-button>
    </view>

    <!-- 购物车商品列表 -->
    <view class="cart-content" v-else>
      <view class="cart-header">
        <view class="select-all">
          <wd-checkbox v-model="selectAll" @change="toggleSelectAll">全选</wd-checkbox>
        </view>
        <view class="clear-cart" @click="clearCart">清空购物车</view>
      </view>

      <view class="cart-items">
        <view class="cart-item" v-for="(item, index) in cartItems" :key="item.id">
          <view class="item-select">
            <wd-checkbox v-model="item.selected" @change="updateSelectAll"></wd-checkbox>
          </view>
          <view class="item-image">
            <image :src="item.image" mode="aspectFill" />
          </view>
          <view class="item-info">
            <view class="item-name">{{ item.name }}</view>
            <view class="item-spec">{{ item.specText }}</view>
            <view class="item-price">¥{{ item.price }}</view>
          </view>
          <view class="item-actions">
            <view class="quantity-control">
              <wd-button
                size="small"
                @click="decreaseQuantity(index)"
                :disabled="item.quantity <= 1"
              >
                -
              </wd-button>
              <text class="quantity">{{ item.quantity }}</text>
              <wd-button size="small" @click="increaseQuantity(index)">+</wd-button>
            </view>
            <view class="item-total">¥{{ (item.price * item.quantity).toFixed(2) }}</view>
            <view class="delete-btn" @click="removeItem(index)">🗑️</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="bottom-settlement" v-if="cartItems.length > 0">
      <view class="settlement-left">
        <view class="total-info">
          <text class="total-label">合计：</text>
          <text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
        </view>
        <view class="selected-count">已选择 {{ selectedCount }} 件商品</view>
      </view>
      <view class="settlement-right">
        <wd-button type="primary" @click="checkout" :disabled="selectedCount === 0">
          结算({{ selectedCount }})
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useOrderStore } from '@/store/orderConfim'

// 获取订单store
const orderStore = useOrderStore()

// 购物车商品数据
const cartItems = ref([
  {
    id: 1,
    name: '红富士苹果',
    specText: '规格：中果(2-3个/斤), 包装：精美礼盒',
    price: 20.8,
    quantity: 2,
    image: '/static/images/products/apple.jpg',
    selected: true,
  },
  {
    id: 2,
    name: '脐橙',
    specText: '规格：中果(2-3个/斤), 包装：散装',
    price: 12.5,
    quantity: 1,
    image: '/static/images/products/orange.jpg',
    selected: true,
  },
  {
    id: 3,
    name: '海南香蕉',
    specText: '规格：中果(2-3个/斤), 包装：散装',
    price: 8.9,
    quantity: 3,
    image: '/static/images/products/banana.jpg',
    selected: false,
  },
])

// 全选状态
const selectAll = ref(true)

// 计算总价
const totalPrice = computed(() => {
  return cartItems.value
    .filter((item) => item.selected)
    .reduce((total, item) => total + item.price * item.quantity, 0)
})

// 计算选中商品数量
const selectedCount = computed(() => {
  return cartItems.value.filter((item) => item.selected).length
})

// 增加商品数量
const increaseQuantity = (index: number) => {
  cartItems.value[index].quantity++
}

// 减少商品数量
const decreaseQuantity = (index: number) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity--
  }
}

// 移除商品
const removeItem = (index: number) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个商品吗？',
    success: (res) => {
      if (res.confirm) {
        cartItems.value.splice(index, 1)
        updateSelectAll()
      }
    },
  })
}

// 切换全选
const toggleSelectAll = (value: boolean) => {
  cartItems.value.forEach((item) => {
    item.selected = value
  })
}

// 更新全选状态
const updateSelectAll = () => {
  const allSelected = cartItems.value.every((item) => item.selected)
  const someSelected = cartItems.value.some((item) => item.selected)

  if (allSelected) {
    selectAll.value = true
  } else if (someSelected) {
    selectAll.value = false
  } else {
    selectAll.value = false
  }
}

// 清空购物车
const clearCart = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空购物车吗？',
    success: (res) => {
      if (res.confirm) {
        cartItems.value = []
        selectAll.value = false
      }
    },
  })
}

// 去购物
const goShopping = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}

// 结算
const checkout = () => {
  const selectedItems = cartItems.value.filter((item) => item.selected)
  if (selectedItems.length === 0) {
    uni.showToast({
      title: '请选择要结算的商品',
      icon: 'none',
    })
    return
  }

  // 转换为订单商品格式
  const orderItems = selectedItems.map((item) => ({
    id: item.id,
    name: item.name,
    image: item.image,
    specText: item.specText,
    quantity: item.quantity,
    price: item.price,
    totalPrice: item.price * item.quantity,
  }))

  // 使用Pinia store保存订单数据
  orderStore.setOrderItems(orderItems)

  // 跳转到订单确认页面
  uni.navigateTo({
    url: '/pages/order/confirm',
  })
}

onMounted(() => {
  console.log('购物车页面加载完成')
})
</script>

<style lang="scss" scoped>
.cart-page {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 100px;
}

// 空购物车样式
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;

  .empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.5;
  }

  .empty-text {
    font-size: 18px;
    color: #666;
    margin-bottom: 8px;
  }

  .empty-subtext {
    font-size: 14px;
    color: #999;
    margin-bottom: 30px;
  }
}

// 购物车内容
.cart-content {
  .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    margin-bottom: 8px;

    .select-all {
      font-size: 14px;
      color: #333;
    }

    .clear-cart {
      font-size: 14px;
      color: #ff4757;
    }
  }

  .cart-items {
    .cart-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background: #fff;
      margin-bottom: 8px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

      .item-select {
        margin-right: 12px;
      }

      .item-image {
        width: 80px;
        height: 80px;
        margin-right: 12px;
        border-radius: 8px;
        overflow: hidden;
        background: #f5f5f5;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .item-info {
        flex: 1;
        margin-right: 12px;

        .item-name {
          font-size: 16px;
          color: #333;
          margin-bottom: 4px;
          font-weight: 500;
        }

        .item-spec {
          font-size: 12px;
          color: #666;
          margin-bottom: 8px;
        }

        .item-price {
          font-size: 16px;
          color: #ff4757;
          font-weight: 600;
        }
      }

      .item-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;

        .quantity-control {
          display: flex;
          align-items: center;
          gap: 8px;

          .quantity {
            font-size: 14px;
            color: #333;
            min-width: 30px;
            text-align: center;
          }
        }

        .item-total {
          font-size: 14px;
          color: #ff4757;
          font-weight: 600;
        }

        .delete-btn {
          font-size: 16px;
          color: #999;
          padding: 4px;
        }
      }
    }
  }
}

// 底部结算栏
.bottom-settlement {
  position: fixed;
  bottom: 43px;
  left: 0;
  right: 0;
  background: #fff;
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

  display: flex;
  justify-content: space-between;
  align-items: center;

  .settlement-left {
    flex: 1;

    .total-info {
      display: flex;
      align-items: center;
      margin-bottom: 4px;

      .total-label {
        font-size: 14px;
        color: #666;
      }

      .total-price {
        font-size: 20px;
        color: #ff4757;
        font-weight: 600;
      }
    }

    .selected-count {
      font-size: 12px;
      color: #999;
    }
  }

  .settlement-right {
    :deep(.wd-button) {
      height: 44px;
      font-size: 16px;
      border-radius: 8px;
      min-width: 120px;
    }
  }
}

// 响应式设计
@media (max-width: 375px) {
  .cart-content .cart-items .cart-item {
    padding: 12px;

    .item-image {
      width: 70px;
      height: 70px;
    }

    .item-info .item-name {
      font-size: 14px;
    }
  }

  .bottom-settlement {
    padding: 12px;

    .settlement-left .total-info .total-price {
      font-size: 18px;
    }
  }
}
</style>
